<template>
  <div class="container">
    <div class="title">商务谈判物质条件准备的主要内容</div>
    <input type="text" placeholder="请输入token" v-model="inputValue" />
    <button @click="saveHandle">存储</button>
    <button @click="showToken">输出token内容</button>

    <van-picker title="标题" :columns="columns" @change="selectChange" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { userDefaultStore } from "@/stores/userStore.js";
const inputValue = ref("");
const pinia = userDefaultStore();

const saveHandle = () => {
  pinia.setToken(inputValue.value);
};

const showToken = () => {
  console.log("token值内容", pinia.token);
};

const columns = ref([
  {
    text: "浙江",
    value: "Zhejiang",
    children: [
      {
        text: "杭州",
        value: "Hangzhou",
        children: [
          { text: "西湖区", value: "Xihu" },
          { text: "余杭区", value: "Yuhang" },
        ],
      },
      {
        text: "温州",
        value: "Wenzhou",
        children: [
          { text: "鹿城区", value: "Lucheng" },
          { text: "瓯海区", value: "Ouhai" },
        ],
      },
    ],
  },
  {
    text: "福建",
    value: "Fujian",
    children: [{ text: "", value: "", children:[{text:"",value:""}]}],
  },

  {
    text: "安徽",
    value: "Anhui",
    children: [{ text: "", value: "", children:[{text:"",value:""}]}],
  },
]);

const selectChange = ({selectedIndexes}) => {
  const index = selectedIndexes[0];
  if (index>0) {
    setInterval(() => {
      columns.value[index].children =  [
      {
        text: "福州",
        value: "Fuzhou",
        children: [
          { text: "鼓楼区", value: "Gulou" },
          { text: "台江区", value: "Taijiang" },
        ],
      },
      {
        text: "厦门",
        value: "Xiamen",
        children: [
          { text: "思明区", value: "Siming" },
          { text: "海沧区", value: "Haicang" },
        ],
      },
    ]
    }, 2000);
  }
  
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  //   background-color: #000000;
  //   color: #ffffff;
  .title {
    padding: 10px;
    font-size: 30px;
    font-size: 38px;
    font-weight: 500;
    // color: #ffffff;
    line-height: 50px;
    text-align: center;
  }

  input {
    background-color: aqua;
  }
  .content {
    font-size: 30px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 300;
    // color: #ffffff;
    line-height: 50px;
  }
}
</style>
